<script setup lang="ts">
import { reactive } from 'vue'
import {
    ChatDotSquare,
    Comment,
    User,
    UserFilled,
    Cellphone,
    Operation
} from '@element-plus/icons-vue'
import { base64ToBlob, mimeTypes } from '../../utils/blob'
import { deepClone } from '../../utils/json'

const props = defineProps({
    avatar: {
        type: String,
        default: ''
    },
    menus: {
        type: Array<ChatMenu>,
        default: () => []
    }
})

const active = reactive({
    index: 'message',
    fullColor: '#07c160',
    lineColor: '#6b6b6b'
})

const emit = defineEmits(['chooseAvatar'])

const chooseAvatar = async () => {
    const file = await window.ipcRenderer.invoke('select-local-file', {
        properties: ['openFile'],
        filters: [{ name: '图片文件', extensions: ['png', 'jpg', 'jpeg', 'gif'] }]
    }, true)

    const blob = base64ToBlob(file.base64, mimeTypes(file.ext))
    emit('chooseAvatar', {
        path: file.path,
        blobUrl: URL.createObjectURL(blob)
    })
}

const handleLoadHash = (hash: string) => {
    try {
        window.ipcRenderer.send('set-config', {
            wechat: {
                menus: deepClone(props.menus)
            }
        })
    } catch (err) {
        console.error(err)
    }
    window.ipcRenderer.send('load-hash', `${hash}?redirect=/wechat`)
}
</script>
<template>
    <el-aside class="nav no-drag">
        <el-avatar shape="square" :size="38" :fit="props.avatar" :src="props.avatar" @click="chooseAvatar" />
        <div class="top-nav">
            <el-button @click="active.index = 'message'" text>
                <template #icon>
                    <el-badge
                        :hidden="props.menus.filter(item => item.type === 0 && !item.isRead && !item.isMute).length == 0"
                        :value="props.menus.filter(item => item.type === 0 && !item.isRead && !item.isMute).length">
                        <el-icon :color="active.lineColor" v-if="active.index !== 'message'">
                            <ChatDotSquare />
                        </el-icon>
                        <el-icon :color="active.fullColor" v-else>
                            <Comment />
                        </el-icon>
                    </el-badge>
                </template>
            </el-button>
            <el-button @click="active.index = 'user'" text>
                <template #icon>
                    <el-icon :color="active.lineColor" v-if="active.index !== 'user'">
                        <User />
                    </el-icon>
                    <el-icon :color="active.fullColor" v-else>
                        <UserFilled />
                    </el-icon>
                </template>
            </el-button>
            <el-button @click="active.index = 'like'" text>
                <template #icon>
                    <img style="width: 22px;" v-if="active.index !== 'like'" src="../../assets/wechat/like.svg"
                        alt="like">
                    <img style="width: 22px;" v-else src="../../assets/wechat/like-full.svg" alt="like-full">
                </template>
            </el-button>
            <el-button text>
                <template #icon>
                    <img style="width: 20px;" src="../../assets/wechat/moments.svg" alt="moments">
                </template>
            </el-button>
            <el-button text>
                <template #icon>
                    <img style="width: 28px;" src="../../assets/wechat/videos.svg" alt="videos">
                </template>
            </el-button>
            <el-button text>
                <template #icon>
                    <img style="width: 26px;" src="../../assets/wechat/mini-program.svg" alt="mini-program">
                </template>
            </el-button>
        </div>
        <div class="bottom-nav">
            <el-button :icon="Cellphone" text />
            <el-button text title="更多">
                <template #icon>
                    <el-dropdown popper-class="wechat-dropdown" trigger="click">
                        <el-icon>
                            <Operation />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="handleLoadHash('/')">
                                    主界面
                                </el-dropdown-item>
                                <el-dropdown-item @click="handleLoadHash('/setting')">
                                    配置
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </el-button>
        </div>
    </el-aside>
</template>
<style lang="scss" scoped>
.nav {
    width: 60px;
    position: relative;
    background-color: #ededed;

    .bottom-nav {
        position: absolute;
        bottom: 26px;
    }

    .el-button {
        margin-left: 12px;
        margin-top: 16px;
        border-radius: var(--el-border-radius-base) !important;
        padding: 6px;

        :deep(.el-badge) {
            --el-badge-size: 16px;
            --el-badge-padding: 5px;
            font-style: normal;

            .el-badge__content {
                border: unset;
            }
        }

        &.active {
            :deep(.el-icon) {
                color: #07c160;
            }
        }

        :deep(.el-icon) {
            font-size: 22px;
        }
    }

    .el-avatar {
        margin-left: 10px;
        margin-top: 20px;
    }
}
</style>